import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from "umi";
import TableHeader from '@/components/TableHeader/TableHeader';
import SearchContainer from '@/components/SearchContainer/SearchContainer';
import TableList from './components/TableList';
import DrawerDetail from '@/components/Drawer/Drawer';
import StaffDetail from './components/StaffDetail/StaffDetail.jsx';
import Dialog from '@/components/Dialog/Dialog';
import AddStaffForm from './components/addStaffForm/AddStaffForm';
import SearchForm from "./components/SearchForm";
import { setIsShowAdd } from '@/utils/commonFns/commonDispatch';
export default function index() {
    const dispatch = useDispatch();
    const { staffSearch, staffTotal, staffLists, staffDetail } = useSelector(state => state.staff);//搜索内容 总数 数据
    const { isShowAdd } = useSelector(state => state.common);
    const { page, size, queryData } = staffSearch;
    const [closeRight, setcloseRight] = useState(false);
    // 初始化请求数据
    useEffect(() => {
        _initContentPage();
    }, []);

    // 初始化数据,修改页码
    function _initContentPage(page = 1, queryData = {}) {
        if (typeof queryData !== 'object') {
            queryData = {};
        }
        dispatch({
            type: "staff/initStaffContent",
            payload: { page, queryData }
        })
    }


    // 当其值修改完毕执行的函数
    function changeDiallogValue() {
        dispatch({
            type: "staff/initStaffContent",
            payload: { page }
        })
    }

    function addStaffFn() {
        setIsShowAdd(false, dispatch);
        _initContentPage();
    }

    function reload(queryData) {
        _initContentPage(1, queryData)
    }

    return (
        <div className='main-content'>
            {/* 头部定位按钮 */}
            <TableHeader
                total={staffTotal}
                page={page}
                size={size}
                interfaceDelMethod={"destroyStaff"}
                changeCurrentPage={_initContentPage}
                getNewDatas={() => _initContentPage()}
                openAdd={() => setIsShowAdd(true, dispatch)}
            ></TableHeader>
            {/* 搜索内容 */}
            <SearchContainer renderForm={() => <SearchForm reload={reload}></SearchForm>} closeRight={closeRight} setcloseRight={setcloseRight}></SearchContainer>
            {/* 表格显示 */}
            <TableList data={staffLists} changeDiallogValue={changeDiallogValue}></TableList>
            {/* 详情展示 */}
            <DrawerDetail
                title={staffDetail?.userName}
                _id={staffDetail?._id}
                render={() => <StaffDetail staffDetail={staffDetail} _initStaffList={changeDiallogValue}></StaffDetail>}
                reloadFunc={_initContentPage}
                interfaced={"destroyStaff"}
                isStaff={true}
            >
            </DrawerDetail>
            {/* 新增展示 */}
            <Dialog
                isShowClose={false}
                title={"新增员工"}
                width="800"
                dialogStutus={isShowAdd}
                setDialogStatus={(type) => setIsShowAdd(type, dispatch)} render={() => <AddStaffForm
                    addStaffFn={addStaffFn}></AddStaffForm>}></Dialog>
        </div>
    )
}
